window.addEventListener('load', function () {
    // api span标签
    let apiTypeData = [
        { name: "全部", keyword: "身份证实名", isnew: false },
        { name: "生活服务", keyword: "银行卡", isnew: false },
        { name: "金融科技", keyword: "短信", isnew: false },
        { name: "交通地理", keyword: "天气", isnew: false },
        { name: "充值缴费", keyword: "短信", isnew: false },
        { name: "数据智能", keyword: "手机归属地", isnew: false },
        { name: "企业工商", keyword: "IP", isnew: false },
        { name: "应用开发", keyword: "手机归属地", isnew: false },
        { name: "电子商务", keyword: "IP", isnew: false },
        { name: "吃喝玩乐", keyword: "视频", isnew: false },
        { name: "文娱视频", keyword: "视频", isnew: false },
        { name: "免费接口大全", keyword: "短信", isnew: true },
        { name: "短信", keyword: "身份证实名", isnew: false },
        { name: "汽车", keyword: "银行卡", isnew: false },
        { name: "核验", keyword: "银行卡", isnew: false },
        { name: "最新发布", keyword: "银行卡", isnew: true },
        { name: "API私有化部署", keyword: "身份证实名", isnew: true },
    ]

    // 渲染到页面-----定义变量
    let aHtml = '';
    let nameArr = [];
    let keyArr = [];
    let div = document.querySelector('#apiType div')

    // 渲染事件
    apiTypeData.forEach(function (v) {
        aHtml += ` <a class="font12">${v.name}</a> `
    })
    div.innerHTML = `${aHtml}`



    let as = document.querySelectorAll('#apiType div a')
    apiTypeData.forEach(function (v, i) {
        nameArr.push(v.name)
        keyArr.push(v.keyword)

        as[0].classList.add('act')

        // 加粗
        if (v.isnew == true) {
            as[i].classList.add('weight')
        }

        // span mouseover & mouseout事件
        as[i].addEventListener('mouseover', function () {
            as[i].classList.add('active')
        })
        as[i].addEventListener('mouseout', function () {
            as[i].classList.remove('active')
        })


        // span点击事件
        let sle_span = document.querySelector('#api-select span')
        let inpt = document.querySelector('#api-select input')
        as[i].addEventListener('click', function () {
            console.log(888);
            for (let j = 0; j < as.length; j++) {
                as[j].classList.remove('act')
            }
            sle_span.innerHTML = `${nameArr[i]}`
            inpt.placeholder = `${keyArr[i]}`
            as[i].classList.add('act')
        })



    })


    // ul li弹性布局渲染
    let listDataArr = [
        //第一行
        { img: "./imgs/API_01.jpg", name: "2021出行防疫政策指南1", price: "免费", isSpecial: false },
        { img: "./imgs/API_02.jpg", name: "身份证实名认证1", price: "￥0.2000/次", isSpecial: true },
        { img: "./imgs/API_03.jpg", name: "天气预报1", price: "免费", isSpecial: false },
        { img: "./imgs/API_04.jpg", name: "银行卡四元素校验1", price: "￥0.3360/次", isSpecial: true },
        { img: "./imgs/API_05.jpg", name: "短信API服务1", price: "￥0.0400/次", isSpecial: true },

        //第二行
        { img: "./imgs/API_01.jpg", name: "2021出行防疫政策指南1", price: "免费", isSpecial: false },
        { img: "./imgs/API_02.jpg", name: "身份证实名认证1", price: "￥0.2000/次", isSpecial: true },
        { img: "./imgs/API_03.jpg", name: "天气预报1", price: "免费", isSpecial: false },
        { img: "./imgs/API_04.jpg", name: "银行卡四元素校验1", price: "￥0.3360/次", isSpecial: true },
        { img: "./imgs/API_05.jpg", name: "短信API服务1", price: "￥0.0400/次", isSpecial: true },
        //第三行
        { img: "./imgs/API_01.jpg", name: "2021出行防疫政策指南1", price: "免费", isSpecial: false },
        { img: "./imgs/API_02.jpg", name: "身份证实名认证1", price: "￥0.2000/次", isSpecial: true },
        { img: "./imgs/API_03.jpg", name: "天气预报1", price: "免费", isSpecial: false },
        { img: "./imgs/API_04.jpg", name: "银行卡四元素校验1", price: "￥0.3360/次", isSpecial: true },
        { img: "./imgs/API_05.jpg", name: "短信API服务1", price: "￥0.0400/次", isSpecial: true },
        //第四行
        { img: "./imgs/API_01.jpg", name: "2021出行防疫政策指南1", price: "免费", isSpecial: false },
        { img: "./imgs/API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "./imgs/API_03.jpg", name: "天气预报1", price: "免费", isSpecial: false },
        { img: "./imgs/API_04.jpg", name: "银行卡四元素校验1", price: "￥0.3360/次", isSpecial: true },
        { img: "./imgs/API_05.jpg", name: "短信API服务1", price: "￥0.0400/次", isSpecial: true },


        //第一行
        { img: "./imgs/API_01.jpg", name: "2021出行防疫政策指南12", price: "免费", isSpecial: false },
        { img: "./imgs/API_02.jpg", name: "身份证实名认证12", price: "￥0.2000/次", isSpecial: true },
        { img: "./imgs/API_03.jpg", name: "天气预报12", price: "免费", isSpecial: false },
        { img: "./imgs/API_04.jpg", name: "银行卡四元素校验12", price: "￥0.3360/次", isSpecial: true },
        { img: "./imgs/API_05.jpg", name: "短信API服务12", price: "￥0.0400/次", isSpecial: true },

        //第二行
        { img: "./imgs/API_01.jpg", name: "2021出行防疫政策指南12", price: "免费", isSpecial: false },
        { img: "./imgs/API_02.jpg", name: "身份证实名认证12", price: "￥0.2000/次", isSpecial: true },
        { img: "./imgs/API_03.jpg", name: "天气预报12", price: "免费", isSpecial: false },
        { img: "./imgs/API_04.jpg", name: "银行卡四元素校验12", price: "￥0.3360/次", isSpecial: true },
        { img: "./imgs/API_05.jpg", name: "短信API服务12", price: "￥0.0400/次", isSpecial: true },
        //第三行
        { img: "./imgs/API_01.jpg", name: "2021出行防疫政策指南12", price: "免费", isSpecial: false },
        { img: "./imgs/API_02.jpg", name: "身份证实名认证12", price: "￥0.2000/次", isSpecial: true },
        { img: "./imgs/API_03.jpg", name: "天气预报12", price: "免费", isSpecial: false },
        { img: "./imgs/API_04.jpg", name: "银行卡四元素校验12", price: "￥0.3360/次", isSpecial: true },
        { img: "./imgs/API_05.jpg", name: "短信API服务12", price: "￥0.0400/次", isSpecial: true },
        //第四行
        { img: "./imgs/API_01.jpg", name: "2021出行防疫政策指南12", price: "免费", isSpecial: false },
        { img: "./imgs/API_02.jpg", name: "身份证实名认证12", price: "￥0.2000/次", isSpecial: true },
        { img: "./imgs/API_03.jpg", name: "天气预报12", price: "免费", isSpecial: false },
        { img: "./imgs/API_04.jpg", name: "银行卡四元素校验12", price: "￥0.3360/次", isSpecial: true },
        { img: "./imgs/API_05.jpg", name: "短信API服务12", price: "￥0.0400/次", isSpecial: true },
    ]

    // slice
    let cunrrentPage = 0; //开始
    let pageData = 20 //结束

    function pageFigure(cunrrentPage, pageData) {
        // 截取遍历
        let qiequArr = listDataArr.slice(cunrrentPage, pageData)
        // console.log(qiequArr);
        let lisHtml = '';
        let ul = document.querySelector('#api-all-type .type-list')
        qiequArr.forEach(function (v) {

            //   如果isSpecial ==true，则添加企业专用  ${v.isSpecial?'<p class="abs font12">企业专用</p>':''}
            // 如果price == '免费'   bg29c287绿色  bgff549b红色

            lisHtml += `
                        <li class="rel">
                                <p class="abs font12 ${v.isSpecial ? 'on' : ''}">企业专用</p>
                                <a href="#" class="abs tcenter a1">
                                    <img src="${v.img}" alt="">
                                    <h2 class="mt20 font14">${v.name}</h2>
                                    <p class="mt10 ${v.price == '免费' ? 'bg29c287' : 'bgff549b'}">${v.price}</p>
                                </a>
                                <a href="#" class="abs tcenter a2">了解详情</a>
                            </li>
                        `

        })
        ul.innerHTML = `${lisHtml}`

    }

    pageFigure(cunrrentPage, pageData)





    //分页渲染
    let lis = document.querySelectorAll('#api-page .api-page-list li')
    let nexta = document.querySelector('#api-page a')
    // div单击事件
    // let index = 0;
    lis.forEach(function (v, i) {
        lis[i].addEventListener('click', function () {
            clearLi()
            lis[i].classList.add('active')
            pageFigure(i * pageData, (i + 1) * pageData)
            // })
            // 下一页
            console.log(v, i);

        })
    })
    nexta.addEventListener('click', function () {

        // 属性选择器
        let index = Number(document.querySelector("#api-page li[class = 'active']").innerHTML); //有actvie的li
        console.log(index);
        if (index == 8) {
            index = 0
        }
        clearLi();
        lis[index].classList.add('active');
        pageFigure(index * pageData, (index + 1) * pageData)



    })
    // 清空之前的效果
    function clearLi() {
        for (let j = 0; j < lis.length; j++) {
            lis[j].classList.remove('active')
        }
    }













})